<!--  -->
<template>
  <div class="previousdetails">
    <Nav title="查看详情">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="pdetails_con">
      <div class="pdetails_con_item pdetails_con_top flex aligin-center">
        <div class="pdetails_con_topleft">
          <span>幸运</span>
          <span>号码</span>
        </div>
        <div class="f-18 pr-6 pl-6">=</div>
        <div class="pdetails_con_topright flex aligin-center">
          <div class="pdetails_con_trightcon flex justify-center flex-column aligin-center">
            <div class="pdetails_con_bor flex justify-center aligin-center">
              数值
              <span>A</span>
            </div>
            <div class="flex justify-center aligin-center">
              能量值
              <span>能</span>
            </div>
          </div>
          <div class="pdetails_con_quyu">︵ 取 余 数 ︶</div>
          <div class="ml-6 mr-6 f-22">+</div>
          <div class="pdetails_con_number">100001</div>
        </div>
      </div>
      <div class="pdetails_con_item flex">
        <div class="pdetails_con_itemleft">A</div>
        <div class="pdetails_con_itemright">
          <div class="pdetails_con_itemrtop flex f-15">
            <div class="mr-8 ml-8">=</div>
            <div class="ellipsis-line2">{{detail.text}}</div>
          </div>
          <div class="pdetails_con_itemrbtm flex f-15">
            <div class="mr-8 ml-8">=</div>
            <div class="color-red">{{detail.numbers}}</div>
            <button v-if="detail.type==0" @click="toCheck">点击查看</button>
            <button v-if="detail.type==1" @click="expand(detail.issue)">{{flag?'展开':'点击查看'}}</button>
          </div>
          <template v-if="flag">
            <div class="flex justify-between f-14">
              <span>下单时间</span>
              <span>用户账号</span>
            </div>
            <template v-for="(item,index) in extandList">
              <div class="flex justify-between mt-10 f-14 color-gray" :key="index">
                <span>{{item._t}}  <span class="color-red"> -> {{item.time_format}}</span></span>
                <span>{{item.nickname}}</span>
              </div>
            </template>
          </template>
        </div>
      </div>
      <div class="pdetails_con_item flex">
        <div class="pdetails_con_itemleft">能</div>
        <div class="pdetails_con_itemright">
          <div class="pdetails_con_itemrtop flex f-15">
            <div class="mr-8 ml-8">=</div>
            <div class="ellipsis-line2">能量值</div>
          </div>
          <div class="pdetails_con_itemrbtm flex f-15">
            <div class="mr-8 ml-8">=</div>
            <div class="color-red">{{detail.power}}</div>
          </div>
        </div>
      </div>
      <div class="pdetails_con_item f-15">
        <div>计算结果</div>
        <div class="text-center mt-32 color-red">{{detail.result}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { activityCalculate,calculateDetail } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      detail: {},
      flag: false,
      extandList:[]
    };
  },
  computed: {},
  watch: {},
  methods: {
    toCheck() {
      window.location = this.detail.url;
    },
    expand(issue) {
      this.flag = !this.flag;
      calculateDetail({issue}).then(({data:{result}})=>{
        this.extandList=result.list
      })
    }
  },
  created() {},
  mounted() {
    activityCalculate({
      id: this.$route.params.id,
      key: this.$route.params.key
    }).then(({ data: { result } }) => {
      this.detail = result;
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类

.pdetails_con_item {
  padding: 16px;
  background: #f2f2f2;
  margin-top: 14px;
}
.pdetails_con_topleft {
  background: #fd4a43;
  border-radius: 4px;
  color: #fff;
  font-size: 25px;
  padding: 7px;
}
.pdetails_con_topleft span {
  display: block;
}
.pdetails_con_trightcon {
  width: 102px;
  height: 64px;
  border: 1px dashed #656565;
  border-radius: 4px;
  font-size: 15px;
  padding: 0 6px;
}
.pdetails_con_trightcon > div {
  height: 50%;
  line-height: 32px;
  width: 100%;
  text-align: center;
}
.pdetails_con_bor {
  border-bottom: 1px solid #9f9f9f;
}
.pdetails_con_trightcon > div span,
.pdetails_con_itemleft {
  color: #fff;
  background: #fb4b41;
  border-radius: 100%;
  width: 21px;
  height: 21px;
  text-align: center;
  line-height: 21px;
  margin-left: 3px;
}
.pdetails_con_quyu {
  width: 14px;
  margin-left: 11px;
  font-size: 15px;
}
.pdetails_con_number {
  font-size: 19px;
  color: #ce5a4f;
}
.pdetails_con_itemrtop > .ellipsis-line2 {
  line-height: 23px;
  width: 280px;
}
.pdetails_con_itemrbtm {
  margin-top: 32px;
}
.pdetails_con_itemrbtm button {
  margin-left: 80px;
  color: #1592e9;
  border-radius: 4px;
  border: 1px solid #1592e9;
  background: transparent;
  font-size: 15px;
  padding: 2px 6px;
}
</style>